<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>User Home</title>
    <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="./css/element.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/element.js"></script>
    <script src="./router.js"></script>
    <style>
        #app {
            max-width: 1280px;
            margin: 20px auto;
            padding: 10px;
            width: 90%;
            box-sizing: border-box;
            background: #fff;
            min-height: 100vh;
        }

        iframe {
            width: 100%;
            height: 80vh;
            border: none;
            border-radius: 4px;
        }

        h2,
        h3 {
            margin-bottom: 16px;
            color: #409EFF;
        }

        .profile,
        .download-list {
            padding: 20px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            background-color: #fafafa;
        }

        /* 在小屏幕上iframe高度缩小 */
        @media (max-width: 600px) {
            iframe {
                height: 300px;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header style="position: relative;">
                <h2>Welcome, {{ user.name }}</h2>
                <el-button type="primary" size="mini" style="position: absolute; top: 10px; right: 110px;"
                    @click="goToDocs">
                    homepage
                </el-button>
                <el-button type="danger" size="mini" style="position: absolute; top: 10px; right: 20px;"
                    @click="logout">
                    log out
                </el-button>
            </el-header>

            <el-main>
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="8">
                        <section class="profile">
                            <h3>User Profile</h3>
                            <el-descriptions :column="1" border>
                                <el-descriptions-item label="Name">{{ user.name }}</el-descriptions-item>
                                <el-descriptions-item label="Email">{{ user.email }}</el-descriptions-item>
                                <el-descriptions-item label="Affiliation">{{ user.organization }}</el-descriptions-item>
                                <el-descriptions-item label="Research area">{{ user.researchField
                                    }}</el-descriptions-item>
                            </el-descriptions>
                        </section>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="16">
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="user" name="first" v-if="user.role != '0' && Boolean(user.role)">
                                <section class="download-list">
                                    <iframe loading="lazy" src="./components/user.html" title="Download List"></iframe>
                                </section>
                            </el-tab-pane>
                            <el-tab-pane label="Mass Email" name="second" v-if="user.role != '0' && Boolean(user.role)">
                                <section class="download-list">
                                    <iframe loading="lazy" src="./components/email-sender.html"
                                        title="Download List"></iframe>
                                </section>
                            </el-tab-pane>
                            <el-tab-pane label="download-list" name="third">
                                <section class="download-list">
                                    <iframe loading="lazy" src="https://www.tbplas.net/file1749021606379/"
                                        title="Download List"></iframe>
                                </section>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    activeName: "first",
                    user: {
                        name: "Kimi Wang",
                        email: "kimi@example.com",
                        organization: "Example University",
                        researchField: "Condensed Matter Physics",
                    },
                };
            },
            mounted() {
                this.user = JSON.parse(storage.get(loginKey))
                if (this.user.role == '0' || !Boolean(this.user.role)) {
                    this.activeName = 'third'
                }
            },
            methods: {
                goToDocs() {
                    window.location.href = 'https://www.tbplas.net/#'; // 修改为你的文档页路径
                },
                logout() {
                    this.$confirm("Are you sure you want to log out?", "hint", {
                        confirmButtonText: "confirm",
                        cancelButtonText: "cancel",
                        type: "warning",
                    })
                        .then(() => {
                            localStorage.removeItem(loginKey); // 如果有token，清除它
                            window.location.href = "./login.html"; // 替换为你登录页路径
                        })
                        .catch(() => {
                        });
                },
            },
        });
    </script>
</body>

</html>